<template>
  <div class="btns-wrap">
    <TbButton v-for="(item, index) in buttons" :key="index" v-bind="item" />
  </div>
</template>
<script setup lang="ts">
import TbButton from './TbButton.vue'
import {PropType} from 'vue'

defineProps({
  buttons: Array as PropType<any[]>
})
</script>
<style lang="scss" scoped>
.btns-wrap {
  display: inline;
  :deep(.el-button) {
    position: relative;
  }
  :deep(.el-button--text) {
    padding: 0;
  }
  :deep(.red) {
    color: red;
    &[disabled] {
      color: #C0C4CC;
    }
  }
  &.single-btn {
      :deep(.el-button--text) {
        display: initial;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
  }
  .is-disabled::after {
   content: url('../../../assets/svg.svg');
   position: absolute;
   right: 0;
   top: 0;
   z-index: 99;
   height: 1em;
   width: 1em;
  }
}
</style>
